/**
 * 
 * 
 * 
 * 
 * 
 * 
              import 的什么时候用  " "  ：

            （1）:    index.scss  中 import时
            （2）:    index.stylus  中 import时
            （3）:    index.vue 的 style  中 import时


              import  的什么时候用  ' '  :

              （1）:   main.js    中 import时
              （2）：   pullaway_router.js   中 import时
              （3）：  在 index.vue 的 script  中 import时



            可复用 能继承 要完整;



            周期性迭代;
              重构
              设计
              模仿



              css模块化项目设计：
                先整体 后 部分 再颗粒化
                  1: 布局
                  2: 页面
                  3: 功能
                  4: 业务

                  先抽象 再具体：




                  sass  学习笔记：

                    （1）：变量套变量

 $highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

//编译后

.selected {
  border: 1px solid #F90;
}







nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
这比下边这种同等样式的写法要好：

nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}
                    


继承：


.foo .bar { @extend .baz; }
.bip .baz { a: b; }
              




SPA设计原理：
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,   user-scalable-no ,initial-scale=1,  maximum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
    <meta name="renderer" content="webkit">
</head>
<body>
                
<article id="app">
           

 </article>            <!--  本地路由的实现  点击 api a  改变地址 不会触发事件   前进后退的时候 触发事件 -->

<a class="api a" style="color:red" >api a</a>
<a class="api b">api b</a>

<script type="text/javascript">
//注册路由
document.querySelectorAll('.api').forEach( item=>{
 item.addEventListener('click' ,(e)=>{   //注册事件
        a.preventDefault(); //阻止默认事件
        const link =item.textContent;
        window.history.pushState({name:'.api'}, title,link );   

 },false )
});


//监听路由
window.addEventListener('popstate' ,(e)=>{
 console.log({
     location:location.href,
     state:e.state 
 });
},false)

</script>  

<h1>Hash</h1>      <!--  本地路由的实现  点击 hash a  改变地址 触发事件   前进后退的时候 触发事件 -->




<a class="hash a" style="color:red" >api a</a>
<a class="hash b">api b</a>

<script type="text/javascript">
//注册路由
document.querySelectorAll('.api').forEach( item=>{
 item.addEventListener('click' ,(e)=>{   //注册事件
        a.preventDefault(); //阻止默认事件
        const link =item.textContent;
        location.hash= link

 },false )
});


//监听路由
window.addEventListener('hashChange' ,(e)=>{
 console.log({
     location:location.href,
     hash:location.hash 
 });
},false)

</script>  


</body>
</html>



JS组件设计：
  
  a:  高内聚 低藕合






  定义私有组件：

  在要调用的组件上：

  <script>
import publicCommentzjVue from './publicCommentzj.vue'  ;

export default  {     //向外暴露成员  
        data(){
            return{

            }
        },
            methods:{
                    show(){
                        alert("调用了  webpack的regiest中Vue中 子组件 方法 ");
                    }
            },
            components:{
              "comment-box":publicCommentzjVue
            }
}


</script>




     ！！！！ npmjs.com   
  ！！！！！  所有开源模块平台   







      插槽slot：

      一、什么时候用到slot：

            父组件要传递内容给子组件（子组件想获取父组件上的内容）

        slot插槽也可以定义默认值 父组件如果不传递内容，子组件所传递的slot插槽内容就会被显示



        具名插槽（如果插槽没有被定义名字 一个插槽就会获取父组件上的多个信息 ）：


             <div id="root">
    <body-content>
        <div class="header" slot="header">header</div> //重点在这
        <div class="footer" slot="footer">footer</div> //重点在这
    </body-content> 
  </div>

  <script>
    Vue.component('body-content',{
       template: `<div>
                    <slot name="header"></slot>   //重点在这
                    <div class='content'>content</div>
                    <slot name="footer"></slot>   //重点在这
                  </div>`
    })

    var vm = new Vue({
      el: "#root"
    })
  </script>



作用域插槽：

          当子组件做循环显示列表 或 某一部分由外部传递进来 时，则使用 作用域插槽

<body>
     <div id="root">
         <child>
           <template slot-scope="props">
               <h1>{{props.item}}</h1>
	   </template>
         </child>
     </div>

   <script>
     Vue.component('child', {
       data: function(){
          return {
	    list: [1, 2, 3, 4]
	   }
       },
       template: `<div>
                    <ul>
                     <slot 
                        v-for="item of list"
                        :item=item
                     ></slot>
                   </ul>
                 </div>`
	})
		
	var vm = new Vue({
	   el:'#root'
	})
    </script>
</body>





<my-component>
  <template v-slot:header>
    <p>Header</p>
  </template>
  
  <template v-slot:item="{ data }">
    <h2>{{ data.title }}</h2>
    <p>{{ data.text }}</p>
  </template>
  
  <template v-slot:footer>
    <p>Footer</p>
  </template>
</my-component>



      判断：  v-if="options.pagination"




      疑问：  在主页面上  怎么导入一个组件     一个vue  怎么在另一个vue上显示 


            float  flex  






            dd{
              &:nth-child(2){
                
              }
            }






      京东金融的项目源码   把 入口文件写成一个 <router-view/> 
      然后home文件夹里面写 第一张页面的内容（包括 header slider navbar），个个部分的组件分别存放在home
      里面的index.vue 中 调用index.vue 就可以加载第一张的内容  在manageMoney 文件夹里面也是一样的

 */